import React, { useEffect, Suspense } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Redirect,
  Route,
} from 'react-router-dom'
import routesMap from './routes'
import { DispatchProp, connect } from 'react-redux'
import { validateLocalStatus } from '../store/actions/user'
import { RouteViewContainer } from '../components/router-view/routerview'
import { Spin } from 'antd'

const Routes: React.FC<DispatchProp> = function ({ dispatch }: DispatchProp) {
  // 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（`[]`）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。
  useEffect(() => {
    // validateLocalStatus并没有使用到外界参数，因此[]里面没有依赖项，是安全的
    dispatch(validateLocalStatus())
  }, [])
  return (
    <Router basename="/">
      <Suspense
        fallback={
          <Spin
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%,-50%)',
            }}
          />
        }
      >
        {/* Switch 渲染与location匹配的第一个子级<Route>或<Redirect> */}
        <Switch>
          <Redirect exact from="/" to="/login" />
          {routesMap.map((route, index) => (
            <RouteViewContainer {...route} key={index} />
          ))}
        </Switch>
      </Suspense>
    </Router>
  )
}
// `connect`方法，用于从 UI 组件生成容器组件
export default connect()(Routes)
